// 主页

import styled from "@emotion/styled";
import { allBg } from "components/style";
import { HeaderScreen } from "screens/main/header";
import { TipBoxScreen } from "screens/main/tip-box";
import { FooterScreen } from "screens/main/footer";
import { useDispatch } from "react-redux";
import ContentBoxScreen from "screens/main/content-box";
import { editActions } from "screens/edit/edit.slice";
import { Login, LoginData } from "http/index-http";
import { Navigate, Route, Routes } from "react-router";
import { BrowserRouter as Router } from "react-router-dom";
import { message } from "antd";
import { mainActions } from "./main.slice";
import { useMount } from "util/index";
import { useAsync } from "util/use-async";
import loadable from "@loadable/component";
import LoadingTip from "components/loadingTip";
import { useEffect, useState } from "react";
import { NotFoundScreen } from "screens/not-found";
import { ToTop } from "components/to-top";

const MainScreen = () => {
  const dispatch = useDispatch();

  const { run, isLoading } = useAsync();

  useMount(() => {
    run(
      Login()
        .then(
          ({ content, liveDays, contentNum, browseCount, tops }: LoginData) => {
            dispatch(editActions.setContent(content));
            dispatch(
              mainActions.onSetLoginInfo({
                liveDays,
                contentNum,
                browseCount,
                tops,
              })
            );
          }
        )
        .catch((error) => {
          dispatch(editActions.setContent([]));
          message.error(`${error}`);
        })
    );
  });

  const [isLoadEdit, setIsLoadEdit] = useState(false);
  const [AsyncEdit] = useState(() => loadable(() => import("../edit/index")));
  useMount(() => {
    AsyncEdit.load().then(() => {
      setIsLoadEdit(true);
    });
  });

  return (
    <Container>
      {isLoading ? (
        <LoadingTip spinning={isLoading} style={{ height: "100vh" }} />
      ) : (
        <Router>
          <HeaderScreen />
          <Routes>
            <Route
              path={"/edit/*"}
              element={isLoadEdit ? <AsyncEdit /> : <LoadingTip />}
            ></Route>
            <Route  path={"/content/*"} element={<MainContentScreen />}></Route>
            <Route  path={"*"} element={<NotFoundScreen />}></Route>
            <Navigate to={"/content"} />
        
          </Routes>
        </Router>
      )}
    </Container>
  );
};

const MainContentScreen = () => {
  const [isLoadContent, setIsLoadContent] = useState(false);
  const [AsyncContent] = useState(() => loadable(() => import("./content")));
  const [loadType, setLoadType] = useState(true);
  useEffect(() => {
    AsyncContent.load().then(() => {
      if (loadType) {
        setIsLoadContent(true);
      }
    });
    return () => {
      setLoadType(false);
    };
  });
  return (
    <Main>
      <Content>
        <Routes>
          <Route path={"/"} element={<ContentBoxScreen />}></Route>
          <Route
            path={":id"}
            element={isLoadContent ? <AsyncContent /> : <LoadingTip />}
          ></Route>
          <Route  path={"*"} element={<NotFoundScreen />}></Route>
        </Routes>
        <TipBoxScreen />
        <FooterScreen />
        {/* <ToTop/> */}
      </Content>
    </Main>
  );
};

export default MainScreen;

const Content = styled.div`
  width: 100%;
  min-height: calc(100vh - 4rem);
  position:relative;
  padding-top: 4rem;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
`;

const Main = styled.div`
  position: relative;
  width: 100%;
  min-height: 100vh;
`;

const Container = styled.div`
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 130rem;
  width: 100%;
  background-color: ${allBg};
`;
